<template>
  <!-- 天地图添加热力图 -->
  <div class="box">
    <div class="button">
      <el-button type="primary" @click="openHeatmap">显示热图</el-button>
      <el-button :plain="true" @click="closeHeatmap">关闭热图</el-button>
    </div>
    <!-- 改变热图半径 -->
    <div class="controls" mt-4 v-if="isShowBtn">
      <el-form ref="form" label-width="80px">
        <el-form-item label="半径">
          <el-slider
            v-model="heatmapRadius"
            :min="5"
            :max="100"
            @change="updateHeatmapOptions"
          ></el-slider>
          <template #tootip="{ value }">半径:{{ value }}</template>
        </el-form-item>
        <el-form-item label="透明度">
          <el-slider
            v-model="heatmapOpacity"
            :min="0.1"
            :max="1"
            :step="0.1"
            @change="updateHeatmapOptions"
          >
            <template #tooltip="{ value }">透明度: {{ value }}</template>
          </el-slider>
        </el-form-item>
        <el-form-item label="颜色渐变">
          <el-radio-group v-model="gradientType" @change="updateHeatmapOptions">
            <el-radio label="default">默认渐变</el-radio>
            <el-radio label="blue">蓝色系</el-radio>
            <el-radio label="red">红色系</el-radio>
            <el-radio label="rainbow">彩虹色</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <div id="mapContain" class="map-container"></div>
</template>

<script setup lang="ts">
import { onMounted, ref, nextTick, watchEffect } from 'vue'
import 'element-plus/dist/index.css'
interface GradientPreset {
  [key: string]: {
    [key: number]: string
  }
}
let isShowBtn = ref(true)
let map: any = null
// 声明热力图层
let heatmapOverlay: any = null
let pointsArr = ref<any[]>([])
let dataLoaded = ref(false)
// 热力图配置
let heatmapRadius = ref(30)
let heatmapOpacity = ref(0.8)
let gradientType = ref('default')
//预定义渐变方案
const gradientPresets: GradientPreset = {
  default: {
    0.4: 'blue',
    0.65: 'lime',
    0.8: 'yellow',
    1: 'red',
  },
  blue: {
    0.2: 'rgb(0,0,255)',
    0.4: 'rgb(0,128,255)',
    0.6: 'rgb(0,255,255)',
    0.8: 'rgb(128,255,128)',
    1: 'rgb(255,255,0)',
  },
  red: {
    0.2: 'rgb(255,255,200)',
    0.4: 'rgb(255,220,160)',
    0.6: 'rgb(255,180,120)',
    0.8: 'rgb(255,120,80)',
    1: 'rgb(255,0,0)',
  },
  rainbow: {
    0.1: 'rgba(0, 255, 255, 0.7)',
    0.25: 'rgba(0, 191, 255, 0.7)',
    0.4: 'rgba(0, 0, 255, 0.7)',
    0.55: 'rgba(0, 255, 0, 0.7)',
    0.7: 'rgba(255, 255, 0, 0.7)',
    0.85: 'rgba(255, 127, 0, 0.7)',
    1: 'rgba(255, 0, 0, 0.7)',
  },
}
onMounted(() => {
  // 确保DOM渲染完成后初始化地图
  nextTick(() => {
    initMap()
    loadHeatmapData()
  })
})

// 初始化地图
const initMap = () => {
  map = new T.Map('mapContain')
  map.centerAndZoom(new T.LngLat(108.95, 34.27), 4)
  map.enableScrollWheelZoom() // 启用鼠标滚轮缩放

  // 创建热力图覆盖层 初始化
  heatmapOverlay = new T.HeatmapOverlay({
    radius: heatmapRadius.value,
    opacity: heatmapOpacity.value,
    gradient: gradientPresets[gradientType.value],
  })

  map.addOverLay(heatmapOverlay) // 添加热力图覆盖层

  // 监听数据加载状态，数据加载完成后更新热力图
  watchEffect(() => {
    if (dataLoaded.value && pointsArr.value.length > 0) {
      updateHeatmap()
    }
  })
}

// 加载热力图数据
const loadHeatmapData = async () => {
  try {
    // 使用fetch API替代$.ajax
    const response = await fetch('/public/heatMapData/heatMapData.json')
    const result = await response.json()

    pointsArr.value = result.citydata
      .map((item: any) => {
        const coordinates = result.geoCoordMap[item.name]
        if (coordinates) {
          return {
            name: item.name,
            lat: coordinates[1],
            lng: coordinates[0],
            count: item.value,
          }
        }
        return null
      })
      .filter((point: any) => point !== null) // 过滤无效点

    console.log('热力图数据加载完成', pointsArr.value)
    dataLoaded.value = true
  } catch (error) {
    console.error('加载热力图数据失败:', error)
    alert('加载热力图数据失败，请检查网络连接')
  }
}

// 更新热力图数据
const updateHeatmap = () => {
  if (heatmapOverlay && pointsArr.value.length > 0) {
    // 设置热力图数据集
    heatmapOverlay.setDataSet({
      data: pointsArr.value,
      max: 300,
    })

    // 默认显示热力图
    //   openHeatmap()
  }
}
//更新热图配置
const updateHeatmapOptions = () => {
  if (heatmapOverlay) {
    heatmapOverlay.setOptions({
      radius: heatmapRadius.value,
      opacity: heatmapOpacity.value,
      gradient: gradientPresets[gradientType.value],
    })
  }
}

// 打开热图
const openHeatmap = () => {
  if (heatmapOverlay && map) {
    heatmapOverlay.show()
    console.log('热力图已显示')
    isShowBtn.value = true
  }
}

// 关闭热图
const closeHeatmap = () => {
  if (heatmapOverlay && map) {
    heatmapOverlay.hide()
    console.log('热力图已隐藏')
  }
  isShowBtn.value = false
}
</script>

<style lang="scss" scoped>
.box {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  .button {
    display: flex;
    justify-content: space-around;
    margin-top: 5px;
  }
  background-color: skyblue;

  .controls {
    width: 300px;
    height: 200px;
    margin-top: 5px;
    margin-right: 15px;
    opacity: 0.5;
  }
}
.map-container {
  width: 100%;
  height: 100vh; // 根据实际布局调整高度
  position: fixed;
  // top: 60px;
  left: 0;
  z-index: 100;
}

.mt-4 {
  margin-top: 1rem;
}
</style>
